<template>
  <el-container class="main_con" style="padding-bottom: 0px">
  <ufrom @submit="saveData" ref="ufrom">
    <el-form size="medium" label-width="100px" ref="itemForm" :model="obj.configuration" :rules="itemRules">
      <div class="setting_body_item">
        <div class="header">商城状态</div>
        <div class="conetnt edit_con">
          <div class="edit_content">
            <el-form-item label="商城状态">
              <el-radio-group v-model="obj.configuration.is_open">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="obj.configuration.is_open == 0" label="关闭说明">
              <el-input style="width: 360px" type="textarea" v-model="obj.configuration.remark" autosize></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="setting_body_item">
        <div class="header">商城设置</div>
        <div class="conetnt edit_con">
          <div class="edit_content">
            <el-form-item label="商城名称" prop="mall_name"><el-input v-model="obj.configuration.mall_name" style="width: 360px"></el-input></el-form-item>
            <el-form-item label="商城logo" prop="logo">
              <div style="width: 100px; height: 100px"><Upload :tempUrl="obj.configuration.logo" @input="getImage($event, 'logo')"></Upload></div>
              <div style="color: #909399; font-size: 12px">图片为正方形，建议尺寸800*800，用于商城首页分享的系统默认宣传图</div>
            </el-form-item>
            <el-form-item label="售罄图标">
              <div style="width: 100px; height: 100px"><Upload :tempUrl="obj.configuration.sell_out_pic" @input="getImage($event, 'sell_out_pic')"></Upload></div>
              <div style="color: #909399; font-size: 12px">建议尺寸比例为1:1，用于商品售罄后的提示图标</div>
            </el-form-item>

            <el-form-item label="加载图标">
              <div style="width: 100px; height: 100px"><Upload :tempUrl="obj.configuration.load_pic" @input="getImage($event, 'load_pic')"></Upload></div>
              <div style="color: #909399; font-size: 12px">图片为正方形，建议尺寸200*200，用于网络较慢图片未加载出来时的占位图</div>
            </el-form-item>

            <el-form-item label="购物车图标">
              <div class="icon_box" @click="iconshow = true">
                <span class="hasIcon" v-show="obj.configuration.trolley_pic != ''">
                  <i :class="obj.configuration.trolley_pic + ' iconfont'"></i>
                  <i class="icon-abl-close el-icon-error" @click="obj.trolley_pic = ''"></i>
                  <span class="choose_bar" @click="iconshow = true"><i class="txt">替换</i></span>
                </span>
                <span class="noIcon" v-show="obj.configuration.trolley_pic == ''"><i class="el-icon-plus" style="color: #409eff"></i></span>
              </div>
            </el-form-item>
            <!--    <el-form-item label="商城图片预览">
              <el-radio-group v-model="obj.configuration.show_big_pic">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
              <div style="color: #909399; font-size: 12px">
                如果开启此选项，则商品详情、轮播图的图片可以放大预览
              </div>
            </el-form-item> -->
            <el-form-item label="强制绑定手机">
              <el-radio-group v-model="obj.configuration.is_handset">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
              <div style="color: #909399; font-size: 12px">如果开启此选项，用户必须绑定手机号后才能下单</div>
            </el-form-item>
            <el-form-item label="客服二维吗">
              <div style="width: 100px; height: 100px"><Upload :tempUrl="obj.configuration.customer_pic" @input="getImage($event, 'customer_pic')"></Upload></div>
              <div style="color: #909399; font-size: 12px">图片为正方形，建议尺寸400*400</div>
            </el-form-item>

            <el-form-item label="官方客服">
              <el-radio-group v-model="obj.configuration.customer_service_type">
                <el-radio :label="1" v-has='9'>腾讯智服</el-radio>
                <el-radio :label="2" v-has='22'>微信客服</el-radio>
                <el-radio :label="3">客服二维码</el-radio>
              </el-radio-group>
              <div style="color: #909399; font-size: 12px">如果开启此选项，商户端将只能使用平台客服</div>
            </el-form-item>
            <el-form-item v-has='22' v-if="obj.configuration.customer_service_type == 2" label="选择客服">
              <el-button size="mini" v-if="selectMer.length == 0" @click="showSelectH">选择客服</el-button>
              <el-button size="mini" v-if="selectMer.length > 0" @click="showSelectH">{{ selectMer[0].name }}</el-button>
            </el-form-item>
            <el-form-item label="强制使用官方客服">
              <el-radio-group v-model="obj.configuration.cs_is_open">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
              <div style="color: #909399; font-size: 12px">如果开启此选项，商户端将只能使用平台客服</div>
            </el-form-item>
            <el-form-item label="微信审核中">
              <el-radio-group v-model="obj.configuration.is_reviewed">
                <el-radio :label="1">审核中</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
              <div style="color: #909399; font-size: 12px"></div>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </ufrom>
    <el-dialog class="selecticon" title="图标选择器" :visible.sync="iconshow" destroy-on-close width="960px" top="70px">
      <SelectIcon @changeIcon="changeIcon"></SelectIcon>
    </el-dialog>
    <el-dialog title="选择客服" :visible.sync="showSelect" width="50%" append-to-body><SelectCustomer :key="rk" :data="selectMer" @outData="closePro"></SelectCustomer></el-dialog>
  </el-container>
</template>

<script>
import Upload from '@/components/Upload/SingleImage2';
import Tinymce from '@/components/Tinymce';
import SelectIcon from '@/components/SelectIcon/index';
import SelectCustomer from '@/components/SelectCustomer/index';
import {addSiteConfig, editSiteConfig, getSiteConfig} from '@/api/mall/setting';
export default {
  data() {
    return {
      isLoading: false,
      iconshow: false,
      showSelect: false,
      selectMer: [],
      rk: 1,
      obj: {
        type: 'mallBase',
        status: 1,
        configuration: {
          is_open: 0,
          mall_name: '',
          logo: '',
          sell_out_pic: '',
          load_pic: '',
          show_big_pic: 0,
          deal_title: '',
          deal_content: '',
          trolley_pic: '',
          is_handset: 0,
          customer_service_type: 0,
          cs_is_open: 0,
          cs_id: {},
          customer_pic: '',
          cs_detail: {},
          is_reviewed:0
        }
      },
      // 抽奖
      prize: {
        configuration: {
          lottery_open: 1,
          lottery_type: 1,
          lottery_style: 1,
          lottery_limit: '1000',
          lottery_money: 0,
          superposition: true,
          lottery_number: '100',
          lottery_config_id: 0
        }
      },
      itemRules: {
        mall_name: [
          {
            required: true,
            message: '商城名称必须填写'
          }
        ],
        logo: [
          {
            required: true,
            message: '商城logo必须上传'
          }
        ]
      }
    };
  },
  components: {
    Upload,
    Tinymce,
    SelectIcon,
    SelectCustomer
  },
  mounted() {
    this.getConfig('mallBase');
  },
  methods: {
    showSelectH() {
      this.showSelect = true;
    },
    changeIcon(e) {
      this.obj.configuration.trolley_pic = e;
      this.iconshow = false;
    },
    //获取图片
    getImage(val, tag) {
      this.obj.configuration[tag] = val;
    },
    //获取站点配置数据
    getConfig(type) {
      getSiteConfig(type)
        .then(res => {
          if (res.msg) {
            this.obj = res.msg;
            this.obj.configuration.customer_pic = res.msg.configuration.customer_pic ? res.msg.configuration.customer_pic : '';
            if(this.obj.configuration.cs_detail.id){
              this.selectMer.push(this.obj.configuration.cs_detail);
            }

          }
        })
        .catch(e => {
        });
    },

    //保存数据
    saveData() {
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          if (this.obj.configuration.customer_service_type == 2) {
            let wx_customer = this.selectMer[0];
            let cs_detail = {
              id: wx_customer.id,
              name: wx_customer.name,
              url: wx_customer.url,
              corp_id: wx_customer.corp_id
            };
            this.obj.configuration.cs_detail = cs_detail;
          }
          if (this.obj.update_time) {
            //更新
            editSiteConfig(this.obj)
              .then(res => {
                this.$refs.ufrom.init()
                this.getConfig('mallBase');
              })
              .catch(e => {
                this.$refs.ufrom.init()
              });
          } else {
            //新增
            addSiteConfig(this.obj)
              .then(res => {
               this.$refs.ufrom.init()
                this.getConfig('mallBase');
              })
              .catch(e => {
               this.$refs.ufrom.init()
              });
          }
        } else {
          this.$refs.ufrom.init()
          //校验没通过
          return false;
        }
      });
    },
    closePro() {
      this.showSelect = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.configuration {
  .el-input {
    width: 120px;
    margin: 0px 5px;
  }
}
</style>
